<template>
    <div>
    <el-dialog title="快速添加用户" width="55%" :visible.sync="addUserShow" :before-close="cancelAddUser">
      <el-row style="height:60vh">
        <div class="grid-content ">
          <el-input placeholder="输入条件搜索" class="inputStyle" v-model="value" clearable @change="handleNodeClick(2)">
          </el-input>
          <el-row>
            <el-col :span="8">
              <div class="grid-content  scroll">
                <el-tree :props="props" :expand-on-click-node="false" :data="treeData"
                  @node-click="handleNodeClick(1,$event,)">
                </el-tree>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content  scrollul fontsize">
                <ul class="infinite-list overflowAuto" infinite-scroll-immediate v-infinite-scroll="load"
                  infinite-scroll-distance="1">
                  <el-checkbox-group v-model="checkboxuser">
                    <el-checkbox style="height:30px;" v-for="(item,index) in userdata"
                      :label="item.userid+'/'+item.username" :key="index" class="infinite-list-item el-icon-user">
                      {{item.userid+'/'+item.username}}
                    </el-checkbox>
                  </el-checkbox-group>
                </ul>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content  scroll" style="position :relative">
                <div class="sticky">已选中人员</div>
                <div class="infinite-list el-icon-user " v-for="(item,index) in checkboxuser" :key="index">{{item}}
                  <i class="el-icon-circle-close clear fr" @click="deleteUser(index)"></i>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="mt-10">
          <el-button class="fr" type="primary" @click="confirmAdd" :loading="submitloading">确定
          </el-button>
          <el-button type="danger" class="fr mr-10" @click="clearUser">清空</el-button>
          <el-button class="fr mr-10" type="warning" @click="cancelAddUser">关闭</el-button>
        </div>
      </el-row>

    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'addUser',
  components: {},
  props: {
    addUserShow: {
      type: Boolean,
      default: false,
    },

    currentId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      baseUrl: this.$api.baseUrl,
      treeData: [], // 树形数据
      props: {
        label: 'dept_name',
        children: 'children',
      },
      userdata: [], //用户数据
      checkboxuser: [], //选中用户
      submitloading: false,
      value: '', //搜索数据
      total: null,
      size: 20,
      selectType: null,
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getAllList()
  },
  mounted() {},
  methods: {
    //获取树
    getAllList() {
      this.$request(this.baseUrl + 'Platform/organize/getAllList').then((r) => {
        this.treeData = r
      })
    },
    // 关闭
    cancelAddUser() {
      ;(this.value = ''), (this.userdata = [])
      this.checkboxuser = []
      this.$emit('cancelAddUser')
    },
    //查询
    handleNodeClick(type, data) {
      this.selectType = type

      let params = {}
      if (type == 1) {
        params = {
          deptid: data.id,
          status: 1,
          size: this.size,
          page: 1,
        }
      }
      if (type == 2) {
        params = {
          queryString: this.value,
          size: this.size,
          page: 1,
        }
      }
      this.$request(this.baseUrl + 'Platform/user/getlist', params).then((r) => {
        this.userdata = r.list
        this.total = r.total
      })
    },
    // 删除选中用户
    deleteUser(index) {
      this.checkboxuser.splice(index, 1)
    },
    // 下拉刷新
    load() {
      if (this.size >= this.total) {
        return
      } else {
        this.size = this.size + 10
        this.handleNodeClick(this.selectType)
      }
    },
    confirmAdd() {
      if (this.checkboxuser.length < 1) {
        return this.$message.warning('请选择人员再添加')
      }
      let addUserData = []
      this.checkboxuser.forEach((i) => {
        let a = i.split('/')
        addUserData.push(a[0])
      })
      this.submitloading = true
      const Data = {
        rid: this.currentId,
        users: addUserData,
      }
      this.$request(this.baseUrl + 'Platform/role/addRoleUsers', Data, 'post')
        .then((r) => {
          this.$message.success('添加成功')
          let userId = {
            id: this.currentId,
          }
          console.log(this.$parent.setRoleUser(userId))
          setTimeout(() => {
            this.cancelAddUser()
          }, 0)
        })
        .finally(() => {
          this.submitloading = false
        })
    },
    clearUser(a) {
      this.checkboxuser = []
    },
  },
}
</script>

<style lang="scss" scoped>
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.inputStyle {
  width: 100%;
  margin-bottom: 10px;
}
.scroll {
  width: 100%;
  height: 350px;
  border: 1px solid #c1c1c1;
  padding: 10px;
  overflow-x: auto;
  overflow-y: auto;
}
.scrollul {
  width: 100%;
  height: 350px;
  border-top: 1px solid #c1c1c1;
  border-bottom: 1px solid #c1c1c1;
  padding: 10px 0 10px 10px;
}
.fontsize ::v-deep .el-checkbox__label {
  font-size: 14px !important;
}
.overflowAuto {
  overflow: auto;
  height: 100%;
  padding: 0;
}
.clear {
  color: #409eff;
  margin-right: 10px;
  font-size: 20px;
  line-height: 30px;
  cursor: pointer;
}
.sticky {
  position: sticky;
  left: 0px;
  top: 0px;
  z-index: 999;
  background: #fff;
}
.el-icon-user {
  display: block;
  height: 30px;
  line-height: 30px;
  white-space: nowrap;
}
::v-deep .el-icon-user:before {
  content: '\e6e3';
  margin-right: 5px;
}
</style>